<link rel="stylesheet" href="assets/common/plugins/umeditor/themes/default/css/umeditor.css">
<style>
    .am-form-label{
        text-align: left!important;
    }
    
    .question-group{
        /* border: 1px solid #999; */
        border-radius: 10px;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);

        display: flex;
        flex-direction: column;
        /* align-items: flex-end; */
    }

    .add-option-button{
        float: right;
        margin-right: 10px;
    }

    .options-list{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .option-item{
        /* align-self: stretch; */
        border: 1px dotted #999;
        margin: 10px;
        padding: 10px;
        border-radius: 10px;
    }
</style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">添加问卷</div>
                            </div>
                            <!-- 问卷标题 -->
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">问卷标题 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="survey[title]"
                                           placeholder="请输入标题" required>
                                </div>
                            </div>
                            <input type="hidden" value="10001" name="survey[wxapp_id]">
                            <!-- 问卷描述 -->
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label">问卷描述 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="survey[description]" value="">
                                </div>
                            </div>
                            
                            <!-- 问卷问题 -->
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label">问卷问题</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <button type="button" class="am-btn am-btn-secondary" onclick="addQuestion()">添加问题</button>
                                </div>
                            </div>
                            <div id="question-list"></div>
                            
                            <!-- 提交按钮 -->
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary">提交</button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="assets/common/plugins/umeditor/umeditor.config.js?v=<?= $version ?>"></script>
<script src="assets/common/plugins/umeditor/umeditor.min.js"></script>
<script>
let questionCount = 0;

// 添加新问题
function addQuestion() {
    questionCount++;
    const questionHtml = `
        <div class="am-form-group question-group" data-question="${questionCount}">
            <div class="am-form-group">
                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">问题 ${questionCount}</label>
                <div class="am-u-sm-9 am-u-end">
                    <input type="text" name="questions[${questionCount}][question_text]" 
                        placeholder="请输入问题内容" required>
                    <select name="questions[${questionCount}][type]" onchange="toggleOptions(this, ${questionCount})">
                        <option value="填写">填写</option>
                        <option value="单选">单选</option>
                        <option value="多选">多选</option>
                    </select>
                    <button type="button" onclick="removeQuestion(${questionCount})" style="float:right;">删除问题</button>
                </div>
            </div>
            
            <!-- 是否必填 -->
            <div class="am-u-sm-9 am-u-end" style="margin-top: 5px;">
                <label>
                    <input type="checkbox" name="questions[${questionCount}][is_required]" value="1">
                    是否必填
                </label>
            </div>
            
            <!-- 问题选项（仅适用于单选或多选题） -->
            <div class="option-item" id="options-${questionCount}" style="display: none; margin-top: 10px;">
                <button type="button" onclick="addOption(${questionCount})" class="add-option-button">添加选项</button>
                <div class="options-list" data-question="${questionCount}"></div>
            </div>
        </div>
    `;
    document.getElementById('question-list').insertAdjacentHTML('beforeend', questionHtml);
}

// 切换选项显示（仅单选或多选题才显示选项输入）
function toggleOptions(select, questionId) {
    const optionsContainer = document.getElementById(`options-${questionId}`);
    if (select.value === '单选' || select.value === '多选') {
        optionsContainer.style.display = 'block';
    } else {
        optionsContainer.style.display = 'none';
    }
}

// 添加新选项
function addOption(questionId) {
    const optionsList = document.querySelector(`.options-list[data-question="${questionId}"]`);
    const optionCount = optionsList.children.length + 1;
    const optionHtml = `
        <div class="am-form-group option-group">
            <label class="am-u-sm-3 am-u-lg-2 am-form-label">选项 ${optionCount}</label>
            <div class="am-u-sm-9 am-u-end">
                <input type="text" name="questions[${questionId}][options][${optionCount}][option_text]" 
                       placeholder="请输入选项内容" required>
                <button type="button" onclick="removeOption(this)">删除选项</button>
            </div>
        </div>
    `;
    optionsList.insertAdjacentHTML('beforeend', optionHtml);
}

// 删除选项
function removeOption(button) {
    button.closest('.option-group').remove();
}

// 删除问题
function removeQuestion(questionId) {
    const questionElement = document.querySelector(`.question-group[data-question="${questionId}"]`);
    if (questionElement) {
        questionElement.remove();
    }
}

// 表单验证提交
$(function () {
    $('#my-form').superForm();
});
</script>